<template>
    <div>
        <canvas ref="canvas" height="45px" style="width: 100%;box-sizing: border-box;" @click="refreshCode()"></canvas>
    </div>
</template>

<script>
export default {
    name: 'Captcha',
    props: ['codeInput'],
    data() {
        return {
            num1: 0,
            num2: 0,
            num3: 0,
            num4: 0,
            operator1: '+',
            operator2: '+',
            operator3: '+',
            result: 0,
            // codeInput: ''
        }
    },
    mounted() {
        this.refreshCode()
    },
    methods: {
        generateNum() {
            return Math.floor(Math.random() * 10) + 1 // 生成1到10之间的随机整数
        },
        generateOperator() {
            const operators = ['+', '-', '*']
            return operators[Math.floor(Math.random() * operators.length)] // 从加减乘三种运算符中随机选择一种
        },
        generateCode() {
            this.num1 = this.generateNum()
            this.num2 = this.generateNum()
            this.num3 = this.generateNum()
            this.num4 = this.generateNum()
            this.operator1 = this.generateOperator()
            this.operator2 = this.generateOperator()
            this.operator3 = this.generateOperator()
            this.result = eval(`${this.num1}
            ${this.operator1}
            ${this.num2}
            ${this.operator2}
            ${this.num3}
            ${this.operator3}
            ${this.num4}`) // 计算正确的结果
            return `${this.num1} ${this.operator1} ${this.num2} ${this.operator2} ${this.num3} ${this.operator3} ${this.num4} = ?`
        },
        drawBackground(ctx, width, height) {
            ctx.fillStyle = '#f0f0f0'
            ctx.fillRect(0, 0, width, height)
        },
        drawText(ctx, code) {
            ctx.font = 'bold 28px Arial'
            ctx.fillStyle = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
            ctx.fillText(code, 50, 30)
        },
        drawLine(ctx, width, height) {
            for (let i = 0; i < 20; i++) {
                const x1 = Math.random() * width;
                const y1 = Math.random() * height;
                const x2 = Math.random() * width;
                const y2 = Math.random() * height;
                // 随机生成颜色
                ctx.strokeStyle = '#' + Math.floor(Math.random() * 16777215).toString(16);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }
        },
        generateCodeImage() {
            const canvas = this.$refs.canvas
            const ctx = canvas.getContext('2d')
            const width = canvas.width
            const height = canvas.height
            this.drawBackground(ctx, width, height)
            const code = this.generateCode()
            this.drawText(ctx, code)
            this.drawLine(ctx, width, height)
        },
        refreshCode() {
            this.generateCodeImage()
            this.codeInput = ''
        },
        verify() {
            if (this.codeInput.trim() !== '' && Number(this.codeInput) === this.result) {
                this.refreshCode()
                return true
            } else {
                this.refreshCode()
                return false
            }
        }
    },
    watch: {
        result(newVal) {
            // 在这里触发事件，将新的值传递给父组件
            this.$emit('result-changed', newVal)
        }
    }
}
</script>

<style>
input {
    background-color: transparent;
    width: 80%;
    color: #00006B;
    border: 1.6px solid #DEDFE0;
    padding: 10px 0;
    text-indent: 10px;
    margin: 8.5px 0;
    font-size: 14px;
    letter-spacing: 2px;
}

canvas:hover {
    cursor: pointer;
}
</style>
